<template>
	<div class="control-area">
		<div class="back-icon" @click="toBackPage">
			<el-icon class="icon" :size="12"><ArrowLeftBold /></el-icon>
		</div>
		<div class="breadcrumb">
			<el-breadcrumb separator-icon="ArrowRight">
				<el-breadcrumb-item
					v-for="(item, index) in breadcrumb"
					:key="item.title + item.path + index"
					:to="item.path"
				>
					<div>{{ item.title }}</div>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<v-tools v-show="toolsVisible" dark></v-tools>
	</div>
</template>

<script setup>
import { computed } from "vue"
import { useRouter } from "vue-router"
import { useBreadcrumb } from "./modules/useBreadcrumb"
import VTools from "../../../header/components/tools.vue"
import { useSettingStore } from "/store/setting"

const router = useRouter()
const { breadcrumb } = useBreadcrumb()
const settingStore = useSettingStore()

const toolsVisible = computed(() => {
	if (settingStore.fullPage) {
		return true
	}
	if (settingStore.navigatorType === "Double Left" || settingStore.navigatorType === "Single Left") {
		return true
	}
	return false
})

function toBackPage() {
	router.back()
}
</script>

<style lang="scss" scoped>
.control-area {
	height: 50px;
	flex: none;
	background: var(--content-background);
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-right: 20px;
	box-shadow: 0 1px 1px 0 var(--el-border-color);
	position: relative;
	z-index: 2;
	.back-icon {
		width: 40px;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex: none;
		cursor: pointer;
		.icon {
			color: var(--el-text-color-primary);
		}
	}
	.breadcrumb {
		width: 100%;
	}
}
</style>
